<ul
  class="portal-menus"
  dnd-list="model.data"
  dnd-allowed-types="model.allowedTypes"
>
  <li
    ng-repeat="item in model.data"
    dnd-draggable="item"
    dnd-type="item.menuType"
    dnd-disable-if="item.type == 'unknown'"
    dnd-moved="model.data.splice($index, 1)"
    class="background-{{item.type}}"
    dnd-draggable="item"
    dnd-effect-allowed="move"
    dnd-selected="$ctrl.models.selected = item"
    ng-class="{selected: $ctrl.models.selected === item}"
    ng-include="'/mix-app/views/appportal/pages/app-settings/components/portal-menus/' + item.type + '.html'"
  ></li>

  <li class="dndPlaceholder">
    Drop any <strong>{{model.allowedTypes.join(' or ')}}</strong> here
  </li>
</ul>
